<template>
	<div class="home">
		<div class="box">
			<VueLazyComponent tagName="div" v-for="i in 30" class='www' :mark="i" @init="init" :key="i">
				<HelloWorld msg="中秋快乐!" />
				<HelloWorld msg="中秋快乐!" slot="skeleton" />
			</VueLazyComponent>
		</div>
	</div>
</template>

<script>
	const HelloWorld = () => import("@/components/HelloWorld.vue");
	//import HelloWorld from '@/components/HelloWorld.vue'

	export default {
		name: 'Home',
		components: {
			HelloWorld
		},
		provide: function() { //对外提供
			return {
				getMap: 50
			}
		},
		methods: {
			init() {
				console.log("组件出现了")
			}
		},
		created() {
			this.request.getNormal('/interface').then(res => console.log(res))
			this.bus.$emit('qwer', 20)
		}
	}
</script>

<style lang="scss">
	.box {
		width: 100%;
		display: flex;
		flex-flow: wrap;

		.www {
			margin: 20px 0;
			display: flex;
			width: 33.3%;
			height: 500px;
			align-items: center;
			justify-content: center;
		}
	}
</style>
